<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main v-if="target==false">
				<div class="top">
					<h3>分销设置</h3>
				</div>
				<el-form :model="formData" label-width="auto" style="max-width: 600px;margin-left: 100px;">
					<el-form-item label="是否开启分销"  >
						  <el-radio-group v-model="formData.confOpen" @change="select">
							<el-radio :value="1">开启</el-radio>
							<el-radio :value="0">关闭</el-radio>
						  </el-radio-group>
					</el-form-item>
					<el-form-item label="分销层级" :model="formData" >
						<div>
							<el-radio-group v-model="formData.confLevel" @change="select">
								<el-radio :value="0">一级分销</el-radio>
								<el-radio :value="1">二级分销</el-radio>
							</el-radio-group>
							<p style="color: #939393;">分销佣金按照分销层级进行计算</p>
						</div>
					</el-form-item>
					<el-form-item label="分销商是否需要审核" :model="formData" >
						  <el-radio-group v-model="formData.confExamine" @change="select">
							<el-radio :value="1">是</el-radio>
							<el-radio :value="0">否</el-radio>
						  </el-radio-group>
					</el-form-item>
					<el-form-item label="是否开启自购分佣" :model="formData" >
						<div>
							<el-radio-group v-model="formData.confSelf" @change="select">
								<el-radio :value="1">开启</el-radio>
								<el-radio :value="0">关闭</el-radio>
							</el-radio-group>
							<p style="color: #939393;">开启自购，分销商购买自身获得一级佣金，分销商上级获得二级佣金</p>
							<p style="color: #939393;">关闭自购，分销商的上级分销商获得二级佣金，自身不再返佣</p>
						</div>
					</el-form-item>
					<h3>上下线关系</h3>
					<el-form-item label="绑定下级条件" :model="formData" >
						<div>
							<el-radio-group v-model="formData.confWays" @change="select">
								<el-radio :value="0">首次点击分享链接</el-radio>
								<el-radio :value="1">首次付款</el-radio>
							</el-radio-group>
							<p style="color: #939393;">非分销商用户在点击分销商的分享链接后即可成为该分销商的下线</p>
						</div>
					</el-form-item>
					<h3>分销商资格</h3>
					<el-form-item label="分销商申请方式" :model="formData" >
						<div>
							<el-radio-group v-model="formData.confMethod" @change="select">
								<el-radio :value="0">申请分销</el-radio>
								<el-radio :value="1">人人分销</el-radio>
								<el-radio :value="2">手动设置</el-radio>
							</el-radio-group>
							<p style="color: #939393;">申请分销：会员达到条件需要申请才能成为分销商</p>
							<p style="color: #939393;">人人分销：分销商不需要申请，达到条件自动成为分销商</p>
							<p style="color: #939393;">手动设置：分销商只有在后台进行添加，前台会员无法进行申请</p>
						</div>
					</el-form-item>
					<el-form-item label="成为分销商条件" :model="formData" >
						<div>
							<el-radio-group v-model="formData.confDistributionCondition" @change="select">
								<el-radio :value="0">无条件</el-radio>
								<el-radio :value="1">消费次数</el-radio>
								<el-radio :value="2">消费金额</el-radio>
								<el-radio :value="3">购买指定商品</el-radio>
							</el-radio-group>
							<p style="color: #939393;">不需要任何条件，申请注册即可成为分销商</p>
						</div>
					</el-form-item>
					<h3>分销商申请设置</h3>
					<el-form-item label="显示申请协议" :model="formData" >
						<div>
							<el-radio-group v-model="formData.confHide" @change="select">
								<el-radio :value="0">显示</el-radio>
								<el-radio :value="1">隐藏</el-radio>
							</el-radio-group>
						</div>
					</el-form-item>
					<el-form-item label="商品图片">
						<div>
							<el-upload
								v-model="formData.confImage"
								  class="avatar-uploader"
								  :action="uploadUrl"
								  :show-file-list="false"
								  :on-success="handleAvatarSuccess"
								  :before-upload="beforeAvatarUpload"
								>
								  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
								  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
							</el-upload>
							<p style="color: #939393;">建议尺寸：750*337像素</p>
						</div>
					</el-form-item>
					<el-form-item label="协议设置" :model="formData" >
						<a style="color: #0055ff;" @click="target=true">点击设置</a>
					</el-form-item>
					<el-form-item>
						<el-button  @click="Save" type="primary" style="margin: 0 auto;">保存</el-button>
					</el-form-item>
				</el-form>
			</el-main>
			<el-main v-if="target==true">
				<span @click="back" style="padding: 0 15px;"><el-icon><ArrowLeft /></el-icon>返回</span>
				<span style="font-size: 22px;">协议编辑</span>
				<el-form :model="reformData" label-width="auto" style="max-width: 100%;margin-left: 30px;margin-top: 30px;">
					<el-form-item label="协议类型" prop="classtype" :rules="[
						{required:true, message: '协议类型不可为空',trigger:'blur' },
					]">
					  <el-input  v-model="reformData.classtype"
							placeholder="请输入协议类型"
							style="width: 300px;"/>
					</el-form-item>
					<el-form-item label="协议标题" prop="title" :rules="[
						{required:true, message: '协议标题不可为空',trigger:'blur' },
					]">
					  <el-input  v-model="reformData.title"
							placeholder="请输入协议标题"
							style="width: 300px;"/>
					</el-form-item>
					<el-form-item label="内容" prop="recontent" :rules="[
						{required:true, message: '协议内容不可为空',trigger:'blur' },
					]">
						<div style="border: 1px solid #ccc">
						    <Toolbar
						        style="border-bottom: 1px solid #ccc"
						        :editor="editorRef"
						        :defaultConfig="toolbarConfig"
						        :mode="mode"
						    />
						    <Editor
						        style="height: 500px; overflow-y: hidden;"
						        v-model="valueHtml"
						        :defaultConfig="editorConfig"
						        :mode="mode"
						        @onCreated="handleCreated"
						    />
						</div>
					</el-form-item>
				</el-form>
				<div style="display: flex;justify-content: center;margin: 0 auto;">
					<el-button @click="resave" type="primary">保存</el-button> 
					<el-button @click="back" plain>取消</el-button>
				</div>
				
			</el-main>
	    </el-container>
	</div>
</template>

<script setup>
	import {reactive,ref,onMounted,onBeforeUnmount, shallowRef,} from 'vue';
	import { useRouter,useRoute } from 'vue-router';
	import {useCounterStore} from "../stores/counter"
	import Header from "@/components/Header.vue"
	import {disSetDetail,updateDisSet,setagreement,getagreement} from "@/api"
	import { uploadUrl,baseUrl,downloadUrl} from "@/utils/request";
	import { Plus ,ArrowLeft} from '@element-plus/icons-vue';
	import '@wangeditor/editor/dist/css/style.css' 
	import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	
	const target=ref(false)
	let router = useRouter();
	let counter = useCounterStore();
	
	// 富文本编辑框
	let mode="default"
	const editorRef = shallowRef()
	// 内容 HTML
	const valueHtml = ref('<p>hello</p>')
	// 模拟 ajax 异步获取内容
	onMounted(() => {
		setTimeout(() => {
			valueHtml.value = '<p></p>'
		}, 1500)
	})
	
	const toolbarConfig = {}
	const editorConfig = { placeholder: '请输入内容...' }
	
	onBeforeUnmount(() => {
		const editor = editorRef.value
		if (editor == null) return
		editor.destroy()
	})
	
	const handleCreated = (editor) => {
	  editorRef.value = editor
	}
	// let editorCont = ref("");
	// let editorContText = ref("");
	let reformData=reactive({
		classtype:"",
		title:"",
		recontent:"",
		siteId:1
	})
	const resave= async()=>{
		const editor = editorRef.value
		// console.log(reformData);
		reformData.recontent= editor.getText()
		if(reformData.recontent==''){
			ElMessage({
				message:"请输入协议内容",
				type:"error"
			})
		}
		else{
			let res=await setagreement({
				"protocalTypeId":reformData.classtype,
				"protocalTitle":reformData.title,
				"protocalContent":reformData.recontent,
				"setId":1
			})
			if(typeof(res)=="object"){
				ElMessage({
					message:"保存成功",
					type:"success"
				})
			}
			// console.log("协议编辑",res);
		}
	}
	//协议编辑详情
	const agreementdetail= async()=>{
		let res=await getagreement('{}')
		// console.log("协议详情",res);
	}


	let formData = reactive({
			confId:1,
			siteId:1,
			confOpen:0,
			confLevel:0,
			confExamine:0,
			confSelf:0,
			confWays:0,
			confMethod:0,
			confDistributionCondition:0,
			confCompletion:0,
			confConsumeCondition:0,
			confHide:0,
			confImage:"",
			protocalId:0
	})
	
	//详情
	const setDetail=async()=>{
		let res=await disSetDetail()
		formData.confId=res.confId,
		formData.siteId=res.siteId,
		formData.confOpen=res.confOpen,
		formData.confLevel=res.confLevel,
		formData.confExamine=res.confExamine,
		formData.confSelf=res.confSelf,
		formData.confWays=res.confWays,
		formData.confMethod=res.confMethod,
		formData.confDistributionCondition=res.confDistributionCondition,
		formData.confCompletion=res.confCompletion,
		formData.confConsumeCondition=res.confConsumeCondition,
		formData.confHide=res.confHide,
		formData.confImage=res.confImage,
		formData.protocalId=res.protocalId
		// imageUrl.value=baseUrl+formData.confImage
		imageUrl.value=downloadUrl+formData.confImage
		// Object.assign(formData,res)
		// console.log(formData);
		// formData=res
		// console.log("详情",res)
	}
	
	// 保存
	const Save=async ()=>{
		// console.log("点保存时formData",formData);
		let res=await updateDisSet(formData)
		// console.log(res)
		if(res==null){
			ElMessage.success("操作成功")
		}	
		// tableData.value=res.serviceList
		// total.value=res.pageCount
	}
	
	// const Save = () => {
	//   ElMessage.success('Oops, this is a error message.')
	// }
	let flag=ref(1);
	const select=(index)=>{
		flag.value=index
	}
	
	//图片上传
	let imageUrl = ref('')
	
	const handleAvatarSuccess= (response,uploadFile) => {
		// console.log('上传成功',response)
		imageUrl.value = URL.createObjectURL(uploadFile.raw)
	  //imageUrl.value=baseUrl+"manager/"+response.data
		formData.confImage=response.data
	}
	
	const beforeAvatarUpload= (rawFile) => {
		// console.log(rawFile)
		let reg=/(jpg|png|jpeg)$/
	  if (!reg.test(rawFile.type)) {
	    ElMessage.error('图片只能是jpg/jpeg/png格式的')
	    return false
	  } else if (rawFile.size / 1024 / 1024 > 4) {
	    ElMessage.error('图片的大小不能超过4MB')
	    return false
	  }
	  return true
	}
	
	// 返回
	const back=()=>{
		target.value=false
		// window.history.back();
	}
	
	onMounted(()=>{
		setDetail()
		// console.log("formData",formData);
		agreementdetail()
		// queryClassSet()
	})
</script>

<style  lang="less" scoped>
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.el-input{
				width:200px;
			}
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
		}
	}
	.avatar-uploader .avatar {
	  width: 120px;
	  height: 120px;
	  display: block;
	}
	
	.active {
	  border: 1px solid red;
	}

	.selected{
		border:1px solid blue;
	}
	
	:deep(.selectedStyle){
		border: 1px solid blue !important;
	}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>